<template>
  <div>
    <div class="divcss1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="住院号">
          <el-input-number
            v-model="num"
            controls-position="right"
            :min="0"
            :max="10000"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="zhuyuancha">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="divcss2">
      <el-form :inline="true" :model="biaodan" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="biaodan.name" />
        </el-form-item>
        <el-form-item label="科室">
          <el-input v-model="biaodan.ksName" />
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="biaodan.advance" />
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="biaodan.sex" />
        </el-form-item>
        <el-form-item label="医生">
          <el-input v-model="biaodan.doctorName" />
        </el-form-item>
        <el-form-item label="已用">
          <el-input v-model="biaodan.consume" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="biaodan.age" />
        </el-form-item>
        <el-form-item label="床位">
          <el-input v-model="biaodan.bed" />
        </el-form-item>
        <el-form-item label="余额">
          <el-input v-model="biaodan.surplus" />
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="padding-left: 20px">
        <el-form-item>
          <el-input v-model="input" placeholder="请输入药品名称" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        :header-cell-style="headClass"
        style="width: 98%;margin: auto"
      >
        <el-table-column prop="id" label="药品序号" width="180" />
        <el-table-column prop="name" label="药品名称" />
        <el-table-column prop="company" label="单位" />
        <el-table-column prop="cost" label="售价" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >添加
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="药品" :visible.sync="dialogFormVisibleUpdate">
        <el-form
          ref="guahao"
          size="mini"
          :model="form"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="名称" width="50px" prop="name">
            <el-input v-model="form.name" :disabled="true" autocomplete="off" />
          </el-form-item>
          <el-form-item label="数量" width="50px" prop="num">
            <el-input v-model="form.num" />
          </el-form-item>
          <el-form-item label="单价" width="50px" prop="cost">
            <el-input v-model="form.cost" :disabled="true" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
          <el-button type="primary" @click="update">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getList1, getListDrug, xiugaishu } from '../../../api/DrugTable'
import { allList, xiugaiqian, tianjiayp } from '../../../api/Discharge'
export default {
  data() {
    return {
      dialogFormVisibleUpdate: false,
      num: '',
      input: '',
      biaodan: {
        uid: '',
        name: '',
        ksName: '',
        advance: '',
        sex: '',
        doctorName: '',
        consume: '',
        age: '',
        bed: '',
        surplus: ''
      },
      form: {
        id: '',
        name: '',
        num: '',
        cost: '',
        quantity: ''
      },
      userForm: {},
      tableData: []
    }
  },
  mounted() {
    this.Lodwn()
  },
  methods: {
    headClass() {
      return 'text-align: center;background-color: gainsboro'
    },
    onSubmit() {
      if ((this.input === '' || this.input == null)) {
        this.Lodwn()
      } else {
        getListDrug({
          name: this.input
        }).then((res) => {
          if (res.success) {
            this.tableData = res.result
          }
        })
      }
    },
    zhuyuancha() {
      allList({
        id: this.num
      }).then((res) => {
        if (res.success) {
          this.biaodan = res.result[0]
        }
      })
    },
    handleEdit(index, row) {
      this.form = row
      if ((this.num === 0 || this.num == null)) {
        this.Lodwn()
        this.$message.error('请先填住院号')
      } else {
        this.dialogFormVisibleUpdate = true
      }
    },
    update() {
      this.dialogFormVisibleUpdate = false
      xiugaiqian(
        {
          id: this.num,
          consume: this.form.cost * this.form.num
        }
      ).then((res) => {
        if (res.success) {
          this.Lodwn()
          this.zhuyuancha()
          this.$message({
            message: res.message,
            type: 'success'
          })
        } else {
          this.$message.error(res.message)
        }
      })
      xiugaishu(
        {
          id: this.form.id,
          quantity: this.form.num
        }
      ).then((res) => {
        if (res.success) {
          this.Lodwn()
          this.$message({
            message: res.message,
            type: 'success'
          })
        } else {
          this.$message.error(res.message)
        }
      })
      tianjiayp(
        {
          patientId: this.biaodan.uid,
          drugId: this.form.id,
          price: this.form.cost,
          num: this.form.num,
          sumPrice: this.form.cost * this.form.num
        }
      ).then((res) => {
        if (res.success) {
          console.log(this.biaodan)
          this.Lodwn()
          this.$message({
            message: res.message,
            type: 'success'
          })
        } else {
          this.$message.error(res.message)
        }
      })
    },
    Lodwn() {
      getList1().then((res) => {
        if (res.success) {
          this.tableData = res.result
        }
      })
    }
  }
}
</script>
  <style  scoped>
.divcss1 {
  width: 35%;
  height: 200px;
  float: left;
  padding-top: 80px;
  padding-left: 50px
}
.divcss2 {
  width: 65%;
  height: 200px;
  float: left;
  padding-top: 30px;
  padding-left: 50px
}
</style>
